<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- Leaf node -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button matIconButton disabled></button>
    {{node.name}}
  </mat-tree-node>

  <!-- expandable node -->
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodeToggle
                 (expandedChange)="loadChildren(node)" [cdkTreeNodeTypeaheadLabel]="node.name">
    <button matIconButton
            [attr.aria-label]="'Toggle ' + node.name"
            matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>

  <mat-tree-node class="example-load-more" *matTreeNodeDef="let node; when: isLoadMore"
    role="treeitem" (click)="loadOnClick($event, node)"
    (keydown)="loadOnKeypress($event, node)">
    Load more of {{node.parent}}...
  </mat-tree-node>
</mat-tree>
